<!DOCTYPE html>
<html lang="zxx">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Harmic - Organic Food HTML Template</title>
    <meta name="robots" content="noindex, follow"/>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="img/favicon.ico">
    <script src="js/jquery/jquery.min.js"></script>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="css/plugins.min.css">
    <link rel="stylesheet" href="css/vendor.min.css">
    <link rel="stylesheet" href="css/style.min.css">
    <style>
        .main-nav>ul>li:hover{
            background-color: #014099;
        }
        .main-nav>ul>li>a{
            cursor: pointer;
            color: white !important;
            padding-left: 20px;
            padding-right: 20px;
        }
        .main-nav>ul>li>ul>li:hover{
            color: #014099;
        }
        .main-nav>ul>li>ul>li>a{
            cursor: pointer;
        }
        .main-nav>ul>li:not(:last-child) {
            padding-right: 0;
        }
        .bg{
            background-color: #014099;
        }
        .main {
            position: absolute;
            width: 100%;
            left: 0;
            top: 220px;
            right: 0;
            bottom: 0px;
            _position: relative;
            _height: 100%;
            _top: 0px;
            _bottom: 0;
            overflow-y: hidden;
            overflow-x: hidden;
            background: #e1f2ff;
            *zoom: 1;
            /*min-width: 1445px;*/
        }
    </style>
</head>
<body>
<div class="main-wrapper">
    <header class="main-header_area position-relative">
        <!--   顶部   -->
        <div class="header-top border-bottom d-none d-md-block">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-6">
                        <div class="header-top-left">
                            <ul class="dropdown-wrap text-matterhorn">
                                <li class="dropdown yuyan" data-yuyan="en" id="language">
                                    <button class="btn btn-link dropdown-toggle ht-btn" type="button"
                                            id="languageButton" data-bs-toggle="dropdown" aria-expanded="false">
                                        <span>English</span>
                                    </button>
                                    <ul class="dropdown-menu" aria-labelledby="languageButton">
                                        <li data-yuyan="zh"><a class="dropdown-item"><span>中文</span></a></li>
                                        <li data-yuyan="la"><a class="dropdown-item"><span>ພາສາລາວ</span></a></li>
                                    </ul>
                                </li>
                                <li>
                                    <i class="layui-icon layui-icon-cellphone"></i>
                                    <a>+(856)17680254357</a>
                                </li>
                                <li style="margin-left: 10px;">
                                    <i class="layui-icon layui-icon-email"></i>
                                    <a>csd@etllao.com</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="header-top-right text-matterhorn">
                            <i class="layui-icon layui-icon-location"></i>
                            <p class="shipping mb-0" style="margin-left: 3px;line-height: 24px;">Vientiance Capital 01000,Lao PDR</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--   搜索   -->
        <div class="header-middle py-5">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-12">
                        <div class="header-middle-wrap">
                            <a href="main/index.html" class="header-logo">
                                <img src="img/logo.png" alt="Header Logo">
                            </a>
                            <div class="header-search-area d-none d-lg-block">
                                <form action="#" class="header-searchbox">
                                    <select class="nice-select select-search-category wide">
                                        <option value="all">All Category</option>
                                    </select>
                                    <input class="input-field" type="text" placeholder="Search Products" inputPlaceholder="index.search.product">
                                    <button class="btn btn-outline-whisper btn-primary-hover" type="submit"><i
                                            class="pe-7s-search"></i></button>
                                </form>
                            </div>
                            <div class="header-right">
                                <ul>
                                    <li class="dropdown d-none d-md-block">
                                        <button class="btn btn-link dropdown-toggle ht-btn p-0" type="button"
                                                id="settingButton" data-bs-toggle="dropdown" aria-expanded="false">
                                            <i class="pe-7s-users"></i>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="settingButton">
                                            <li><a class="dropdown-item" onclick="toUrl('myAccount')" i18n="index.myAccount">MY ACCOUNT</a></li>
                                            <li><a class="dropdown-item" onclick="toUrl('loginOrRegist')" i18n="index.loginRegist">Login | Register</a></li>
                                        </ul>
                                    </li>
<!--                                    <li class="d-none d-md-block">-->
<!--                                        <a href="wishlist.html">-->
<!--                                            <i class="pe-7s-like"></i>-->
<!--                                        </a>-->
<!--                                    </li>-->
<!--                                    <li class="d-block d-lg-none">-->
<!--                                        <a href="#searchBar" class="search-btn toolbar-btn">-->
<!--                                            <i class="pe-7s-search"></i>-->
<!--                                        </a>-->
<!--                                    </li>-->
                                    <li class="minicart-wrap me-3 me-lg-0">
                                        <!-- <a href="#miniCart" class="minicart-btn toolbar-btn"> -->
                                        <a class="minicart-btn toolbar-btn">
                                            <i class="pe-7s-shopbag"></i>
                                            <span class="quantity">3</span>
                                        </a>
                                    </li>
                                    <li class="mobile-menu_wrap d-block d-lg-none">
                                        <a href="#mobileMenu" class="mobile-menu_btn toolbar-btn pl-0">
                                            <i class="pe-7s-menu"></i>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--   菜单   -->
        <div class="main-header header-sticky" data-bg-color="#1eb9ee">
            <div class="container">
                <div class="main-header_nav position-relative">
                    <div class="row align-items-center">
                        <div class="col-lg-12 d-none d-lg-block">
                            <div class="main-menu">
                                <nav class="main-nav">
                                    <ul>
                                        <li class="drop-holder bg">
                                            <a href="storeindex.html" i18n="index.home">HOME</a>
                                        </li>
                                        <li onclick="toUrl('sim')">
                                            <a i18n="index.sim">ETL SIM</a>
                                        </li>
                                        <li class="megamenu-holder" onclick="toUrl('category')">
                                            <a i18n="index.shop">SHOP</a>
                                        </li>
                                        <li class="drop-holder" onclick="toUrl('package')">
                                            <a i18n="index.popularPackage">POPULAR PACKAGE</a>
                                        </li>
                                        <li class="drop-holder" onclick="toUrl('cart')">
                                            <a i18n="index.cart">CART</a>
                                        </li>
                                        <li class="drop-holder">
                                            <a onclick="toUrl('myAccount')">
                                                <span i18n="index.myAccount">MY ACCOUNT</span>
                                                <i class="fa fa-chevron-down"></i>
                                            </a>
                                            <ul class="drop-menu">
<!--                                                <li onclick="toUrl('orderTracking')">-->
<!--                                                    <a i18n="index.orderTracking">Orders Tracking</a>-->
<!--                                                </li>-->
                                                <li onclick="toUrl('order')">
                                                    <a i18n="index.order">Orders</a>
                                                </li>
                                                <li onclick="toUrl('feedback')">
                                                    <a i18n="index.feedback">Feedback</a>
                                                </li>
                                                <li onclick="toUrl('lostPassword')">
                                                    <a i18n="index.lostPassword">Lost password</a>
                                                </li>
                                            </ul>
                                        </li>
                                        <li onclick="toUrl('privacyPolicy')">
                                            <a i18n="index.privacyPolicy">PRIVACY POLICY</a>
                                        </li>
                                    </ul>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--   小屏菜单   -->
        <div class="mobile-menu_wrapper" id="mobileMenu">
            <div class="offcanvas-body">
                <div class="inner-body">
                    <div class="offcanvas-top">
                        <a href="#" class="button-close"><i class="pe-7s-close"></i></a>
                    </div>
                    <div class="offcanvas-user-info text-center px-6 pb-5">
                        <div class=" text-silver">
                            <p class="shipping mb-0">Vientiance Capital 01000,Lao PDR</p>
                        </div>
                        <ul class="dropdown-wrap justify-content-center text-silver">
                            <li class="dropdown dropup">
                                <button class="btn btn-link dropdown-toggle ht-btn" type="button" id="languageButtonTwo"
                                        data-bs-toggle="dropdown" aria-expanded="false">
                                    English
                                </button>
                                <ul class="dropdown-menu" aria-labelledby="languageButtonTwo">
                                    <li><a class="dropdown-item" href="#">中文</a></li>
                                    <li><a class="dropdown-item" href="#">老挝</a></li>
                                </ul>
                            </li>
                            <li class="dropdown dropup">
                                <button class="btn btn-link dropdown-toggle ht-btn p-0" type="button"
                                        id="settingButtonTwo" data-bs-toggle="dropdown" aria-expanded="false">
                                    <i class="pe-7s-users"></i>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="settingButtonTwo">
                                    <li><a class="dropdown-item" href="my-account.html">My account</a></li>
                                    <li><a class="dropdown-item" href="login-register.html">Login | Register</a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="wishlist.html">
                                    <i class="pe-7s-like"></i>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="offcanvas-menu_area">
                        <nav class="offcanvas-navigation">
                            <ul class="mobile-menu">
                                <li class="menu-item-has-children">
                                    <a href="#">
                                            <span class="mm-text">HOME
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="about.html">
                                        <span class="mm-text">ETL SIM</span>
                                    </a>
                                </li>
                                <li class="menu-item-has-children">
                                    <a href="#">
                                            <span class="mm-text">SHOP
                                        </span>
                                    </a>
                                </li>
                                <li class="menu-item-has-children">
                                    <a href="#">
                                            <span class="mm-text">POPULAR PACKAGE
                                        </span>
                                    </a>
                                </li>
                                <li class="menu-item-has-children">
                                    <a href="#">
                                            <span class="mm-text">CART
                                        </span>
                                    </a>
                                </li>
                                <li class="menu-item-has-children">
                                    <a href="#">
                                            <span class="mm-text">MY ACCOUNT
                                                <i class="pe-7s-angle-down"></i>
                                        </span>
                                    </a>
                                    <ul class="sub-menu">
                                        <li class="menu-item-has-children">
                                            <a href="#">
                                                    <span class="mm-text">ORDERS TRACKING
                                                </span>
                                            </a>
                                        </li>
                                        <li class="menu-item-has-children">
                                            <a href="#">
                                                    <span class="mm-text">ORDERS
                                                </span>
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    <a href="contact.html">
                                        <span class="mm-text">PRIVACY POLICY</span>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
        <div class="offcanvas-search_wrapper" id="searchBar">
            <div class="offcanvas-body">
                <div class="container h-100">
                    <div class="offcanvas-search">
                        <div class="offcanvas-top">
                            <a href="#" class="button-close"><i class="pe-7s-close"></i></a>
                        </div>
                        <span class="searchbox-info">Start typing and press Enter to search</span>
                        <form action="#" class="hm-searchbox">
                            <input type="text" placeholder="Search">
                            <button class="search-btn" type="submit"><i class="pe-7s-search"></i></button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="offcanvas-minicart_wrapper" id="miniCart">
            <div class="offcanvas-body">
                <div class="minicart-content">
                    <div class="minicart-heading">
                        <h4 class="mb-0" i18n="index.shoppingCart">Shopping Cart</h4>
                        <a href="#" class="button-close"><i class="pe-7s-close"></i></a>
                    </div>
                    <ul class="minicart-list">
                        <li class="minicart-product">
                            <a class="product-item_remove" href="#">
                                <i class="pe-7s-close"></i>
                            </a>
                            <a href="shop.html" class="product-item_img">
                            </a>
                            <div class="product-item_content">
                                <a class="product-item_title" href="shop.html">Black Pepper Grains</a>
                                <span class="product-item_quantity">1 x $80.00</span>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="minicart-item_total">
                    <span i18n="index.subtotal">Subtotal</span>
                    <span class="ammount">$240.00</span>
                </div>
                <div class="group-btn_wrap d-grid gap-2">
                    <a href="ltgwc.html" class="btn btn-secondary btn-primary-hover" i18n="index.viewCart">View Cart</a>
                    <a href="order.html" class="btn btn-secondary btn-primary-hover" i18n="index.checkout">Checkout</a>
                </div>
            </div>
        </div>
        <div class="global-overlay"></div>
    </header>
</div>
<div id="main" class="main">
    <iframe name="mainframe" id="mainframe" src="storemain.html" frameborder="0" style="width: 100%;height: 100%" scrolling="no"></iframe>
</div>
<script src="layui/layui.js"></script>
<script src="js/config.js"></script>
<script src="js/token.js"></script>
<script src="js/getcart.js"></script>
<script src="js/vendor.min.js"></script>
<script src="js/plugins.min.js"></script>
<script src="js/jquery.i18n.min.js"></script>
<script src="js/multi_lang_config.js"></script>
</body>
<script>

    var form = layui.form;

    var moduleName = "shop";
    var defaultLang = layui.data('langTab').langType;
    if(defaultLang==undefined || defaultLang=="" || defaultLang==null){
        defaultLang = 'zh';
        layui.data("langTab", { key: "langType", value: defaultLang});
    }else if (defaultLang != "en"){
        $(".yuyan").get(0).dataset.yuyan = defaultLang;
        if (defaultLang == "zh"){
            $("#language").html("<button class=\"btn btn-link dropdown-toggle ht-btn\" type=\"button\"\n" +
                "                                            id=\"languageButton\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">\n" +
                "                                        <span>中文</span>\n" +
                "                                    </button>\n" +
                "                                    <ul class=\"dropdown-menu\" aria-labelledby=\"languageButton\">\n" +
                "                                        <li data-yuyan=\"en\"><a class=\"dropdown-item\"><span>English</span></a></li>\n" +
                "                                        <li data-yuyan=\"la\"><a class=\"dropdown-item\"><span>ພາສາລາວ</span></a></li>\n" +
                "                                    </ul>");
        }else{
            $("#language").html("<button class=\"btn btn-link dropdown-toggle ht-btn\" type=\"button\"\n" +
                "                                            id=\"languageButton\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">\n" +
                "                                        <span>ພາສາລາວ</span>\n" +
                "                                    </button>\n" +
                "                                    <ul class=\"dropdown-menu\" aria-labelledby=\"languageButton\">\n" +
                "                                        <li data-yuyan=\"zh\"><a class=\"dropdown-item\"><span>中文</span></a></li>\n" +
                "                                        <li data-yuyan=\"en\"><a class=\"dropdown-item\"><span>English</span></a></li>\n" +
                "                                    </ul>");
        }
    }

    var i18np = null;
    layui.config(
        {base: 'js/'})
        .extend({i18np: 'i18n'})
        .use([ 'i18np'], function () {
            i18np = layui.i18np;
            i18np.loadProperties(moduleName);
            getGoodsClass();
        })
    initLangConfig({
        defaultLang:defaultLang,
        filePath: "js/i18n/"+moduleName+"/",
        module:moduleName,
        base:"js/"
    })

    // 切换语言
    $("#language ul li").click(function () {
        let old_txt = $(".yuyan span:eq(0)").text();
        let old_yuyan = $(".yuyan").get(0).dataset.yuyan;
        let new_txt = $(this).find('span:eq(0)').text();
        let new_yuyan = this.dataset.yuyan;
        $(this).find('span:eq(0)').text(old_txt);
        this.dataset.yuyan = old_yuyan;
        $(".yuyan span:eq(0)").text(new_txt);
        $(".yuyan").get(0).dataset.yuyan = new_yuyan;
        layui.data("langTab", { key: "oldLang", value: old_yuyan });
        defaultLang = new_yuyan;
        reloadI18n({
            defaultLang:defaultLang,
            filePath: "js/i18n/"+moduleName+"/",
            module:moduleName,
        })
        window.frames[0].changeLang(defaultLang);
        window.frames[0].postMessage({
            changeLang: defaultLang,
        },"*");
        i18np.loadProperties(moduleName);
        initGoodsClass();
    })

    //跳转页面
    function toUrl(url){
        $(".main-nav>ul>li").removeClass("bg");
        var targetUrl = "";
        switch(url){
            case 'sim':             //SIM卡
                $(".main-nav>ul>li:eq(1)").addClass("bg");
                targetUrl = 'ETL-SIM.html';
                break;
            case 'category':        //购物
                $(".main-nav>ul>li:eq(2)").addClass("bg");
                targetUrl = 'category.html';
                break;
            case 'package':         //流量包
                $(".main-nav>ul>li:eq(3)").addClass("bg");
                targetUrl = 'popular-package.html';
                break;
            case 'cart':            //购物车
                $(".main-nav>ul>li:eq(4)").addClass("bg");
                targetUrl = 'ltgwc.html';
                break;
            case 'myAccount':       //我的账户
                $(".main-nav>ul>li:eq(5)").addClass("bg");
                targetUrl = 'my-account.html';
                break;
            case 'orderTracking':   //订单跟踪
                $(".main-nav>ul>li:eq(5)").addClass("bg");
                targetUrl = 'Orders-Tracking.html';
                break;
            case 'order':           //订单
                $(".main-nav>ul>li:eq(5)").addClass("bg");
                targetUrl = 'orderList.html';
                break;
            case 'feedback':        //Feedback
                $(".main-nav>ul>li:eq(5)").addClass("bg");
                targetUrl = 'feedback.html';
                break;
            case 'lostPassword':    //忘记密码
                $(".main-nav>ul>li:eq(5)").addClass("bg");
                targetUrl = 'Lost-password.html';
                break;
            case 'privacyPolicy':   //隐私协议
                $(".main-nav>ul>li:eq(6)").addClass("bg");
                targetUrl = 'PRIVACY-POLICY.html';
                break;
            case 'loginOrRegist':   //登录或注册
                $(".main-nav>ul>li:eq(5)").addClass("bg");
                targetUrl = 'login-register2.html';
                break;
        }
        $("#mainframe").attr('src',targetUrl)
    }

    var goodsClass = [];
    function initGoodsClass() {
        var s='<option value="all" selected>'+i18np.prop('index.allType')+'</option>';
        if(goodsClass.length > 0){
            if (defaultLang == "en"){
                for (let i = 0; i < goodsClass.length; i++) {
                    s+=`<option value="${goodsClass[i].nameEn}">${goodsClass[i].nameEn}</option>`;
                }
            }else if (defaultLang == "zh"){
                for (let i = 0; i < goodsClass.length; i++) {
                    s+=`<option value="${goodsClass[i].nameZh}">${goodsClass[i].nameZh}</option>`;
                }
            }else{
                for (let i = 0; i < goodsClass.length; i++) {
                    s+=`<option value="${goodsClass[i].nameLao}">${goodsClass[i].nameLao}</option>`;
                }
            }
            $(".select-search-category").html(s);
        }
        var script = document.createElement("script");
        script.src="js/main.min.js";
        document.body.appendChild(script);
    }
    //查询商品分类
    function getGoodsClass(){
        $.ajax({
            url:HOST+"webapi/goodsType/getGoodType",
            type:"get",
            success:function (res){
                goodsClass = res.data;
                initGoodsClass();
            }
        })
    }
    // 展开小购物车
    $(".minicart-btn").click(function () {
        $("#miniCart").addClass("open");
    })
</script>


</html>